<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/back-style.css">
</head>
<body>
 
<style>
  css-doodle {
    --rule: ( :doodle {
        @grid: 50x1 / 100vmin;
        perspective: 90vmin;
      }

      background: @multi(@r(40, 20), (radial-gradient(@p(#53d9d1, #f27b9b, #eb7132) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat));

      @size: 120%;
      @place-cell: center;

      border-radius: 50%;
      transform-style: preserve-3d;
      animation: scale-up 15s linear infinite;
      animation-delay: calc(@i() * -.4s);

      @keyframes scale-up {
        0% {
          opacity: 0;
          transform: translate3d(0, 0, 0) rotate(0);
        }

        10% {
          opacity: 1;
        }

        95% {
          transform: translate3d(0, 0, @r(40vmin, 85vmin)) rotate(@r(-360deg, 360deg));
        }

        100% {
          opacity: 0;
          transform: translate3d(0, 0, 1vmin);
        }
      }

    );
  }
</style>

<css-doodle use="var(--rule)"></css-doodle>
<!-- partial -->
  <script src='js/css-doodle.min.js'></script>
</body>
</html>
